<template>
	<div>
		<div style="width: 95%;padding:20px;box-shadow: 0px 0px 2px 4px #B3D4FC;margin: 20px;">
			<el-button type="primary" @click="add()">添加</el-button>
		</div>
		<el-table :data="tableList" border style="width: 100%" size="mini">
			<el-table-column v-for="(item,index) in getColumns" :prop="item.field" :label="item.name">

				<template #default="scope">

					<el-image v-if="scope.row[item.field]['model']=='image'"
						:src="getImageBaseUrl()+scope.row[item.field]['value']" style=" height: 30px" />
					<span v-else-if="scope.row[item.field]['model']=='images'">
						<el-image v-for="(image,iiii) in scope.row[item.field]['value']" :key="iiii"
							:src="getImageBaseUrl()+image" style=" height: 30px;" :initial-index="iiii" />
					</span>
					<el-switch v-else-if="scope.row[item.field]['model']=='switch'"
						v-model="scope.row[item.field]['value']" :active-value="1" :inactive-value="0" disabled>
					</el-switch>
					<span v-else>{{scope.row[item.field]["value"]}}</span>
				</template>

			</el-table-column>

			<el-table-column fixed="right" label="操作" width="auto">
				<template #default="scope">
					<el-button @click="handleClick(scope.row)" type="text">编辑</el-button>
					<el-button type="text" @click="deleteOne(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>

		</el-table>
		<WMmodel v-model:show="show" v-model:form="data.form" :title="data.action=='update'?'编辑':'添加'">
			<template #footer>
				<el-button type="warning" @click="show=false">取消</el-button>
				<el-button v-if="data.action=='add'" type="success" @click="save">添加</el-button>
				<el-button v-else type="success" @click="updateOne">保存</el-button>
			</template>
		</WMmodel>


	</div>
</template>

<script>
	import WMmodel from "/@/components/from/WMModel.vue"
	import {
		saveGroupValue,
		deleteGroupValue,
		updateGroupValue
	} from "/@/api/system.js"
	import {
		ElMessage
	} from 'element-plus'
	import {
		getEnvs
	} from "/@/utils/envs.js"
	import {
		GLOBAL_DATA
	} from '/@/api/constant'
	import {
		reactive,
		toRef,
		ref,
		computed

	} from 'vue';
	export default {
		components: {
			WMmodel
		},
		props: {
			column: {
				type: Array,
				default: () => {
					return []
				}
			},
			table: {
				type: Array,
				default: () => {
					return []
				}
			},
			gid: {
				type: Number,
				default: 0
			},
			resulf: {
				type: Function,
				default: () => {}
			}

		},
		setup(props) {
			const data = reactive({
				form: [],
				action: ""
			})
			const id = ref(0);
			const show = ref(false)

			const handleClick = (row) => {

				id.value = row.id
				const form = []
				props.column.forEach(item => {
					let value = {
						"label": item.name,
						"value": {
							"value": row[item.field].value
						},
						"model": item.model,
						"field": item.field
					}
					form.push(value)
				})
				data.form = form;
				data.action = "update"
				show.value = true
			}

			const add = () => {

				const form = []
				props.column.forEach(item => {
					let value = {
						"label": item.name,
						"value": {
							"value": item.model == 'images' ? [] : ""
						},
						"model": item.model,
						"field": item.field
					}
					form.push(value)
				})
				console.log('>>>>>>>>>>>', form)
				data.form = form;
				data.action = "add"
				show.value = true
				return true
			}
			const getColumns = computed(() => {
				return props.column;
			})
			const tableList = computed(() => {
				return props.table

			})
			const updateOne = () => {
				if (id.value == 0) {
					return ElMessage({
						message: "数据不存在，请刷新页面！",
						type: 'error',
						duration: 3 * 1000
					})
				}
				let save = {
					id: id.value,
					gid: props.gid
				};
				let value = {};
				data.form.forEach(item => {

					if (item.field == "sort") {
						save['sort'] = item.value.value || 0
					} else {
						value[item.field] = item.value.value
					}
				})
				save["value"] = value
				updateGroupValue(save).then(res => {
					props.resulf();
					show.value = false
					ElMessage({
						message: res.message || "保存成功！",
						type: 'success',
						duration: 3 * 1000
					})
				})

			}
			const save = () => {
				if (props.gid == 0) {
					return ElMessage({
						message: "数据不存在，请刷新页面！",
						type: 'error',
						duration: 3 * 1000
					})
				}
				let save = {
					gid: props.gid
				};
				let value = {};
				data.form.forEach(item => {

					if (item.field == "sort") {
						save['sort'] = item.value.value || 0
					} else {
						value[item.field] = item.value.value
					}
				})
				save["value"] = value
				saveGroupValue(save).then(res => {
					props.resulf();
					show.value = false
					ElMessage({
						message: res.message || "添加成功！",
						type: 'success',
						duration: 3 * 1000
					})
				})
			}
			const deleteOne = (id) => {
				if (!id) {
					ElMessage({
						message: "数据不存在，请刷新页面！",
						type: 'error',
						duration: 3 * 1000
					})
				}
				deleteGroupValue({
					id: id
				}).then(res => {
					props.resulf();
					ElMessage({
						message: "删除成功",
						type: 'success',
						duration: 3 * 1000
					})
				}).catch(err => {

				})

			}
			const getImageBaseUrl = () => {
				const {
					envStr
				} = getEnvs()
				return GLOBAL_DATA[envStr]['image-url'];
			}
			return {
				handleClick,
				add,
				show,
				getColumns,
				tableList,
				getImageBaseUrl,
				data,
				save,
				deleteOne,
				updateOne
			}
		}
	}
</script>